<template>
    <view id="nav" ref="nav">
        <view>
            <!-- 只能有一个根元素 -->
            <view class="template-content">
                <!--导航-->
                <u-grid :border="false" col="7" class="grid-row" hover-class="none">
                    <u-grid-item
                            v-for="(item, index) in categories" :key="item.id"
                            :class="[item.id === itemId ? 'grid-item-hover' : '', 'grid-item']"
                            :custom-style="{padding:'0'}"
                            :bg-color="'#ff0000'"
                            @click="categorySearch"
                            :index="item.id"
                    >
                        <text>{{ item.id ? $help.xor_enc(item.c_name) : item.c_name }}</text>
                    </u-grid-item>
                </u-grid>

                <u-row gutter="6" justify="space-between" class="row-row grid-row">
                    <u-col span="3" text-align="center">
                        <u-button @click="newVideos"  class="button-style grid-item-hover" :ripple="true"  size="mini">最优新片</u-button>
                    </u-col>
                    <u-col span="6" text-align="center">
                        <u-search
                                placeholder="请输入关键字"
                                v-model="keyword"
                                height="52"
                                shape="square"
                                :action-style="{'color':'white', 'font-weight':'700', 'font-size': '28rpx'}"
                                @search="keywordSearch"
                                @custom="keywordSearch"
                        ></u-search>
                    </u-col>
                    <u-col span="3" text-align="center">
                        <u-button @click="alreadyBuyVideos" class="button-style grid-item-hover" :ripple="true" size="mini">已购</u-button>
                    </u-col>
                </u-row>
            </view>
        </view>


<!--        <u-tabs :list="list" :scrollable="false"></u-tabs>-->
    </view>

</template>

<script>
    // import helper from "../tools/helper";

    export default {
        // extends:helper,
        name: "Nav",
        data() {
            return {
                keyword:'',
                itemId: 0,
                menusHeight: 115,
                categories: [],

            }
        },

        created() {
            // 获取分类
            // this.getCategories();

            // 修改搜索框的值
            this.$bus.$on('updateSearch', data => {
                this.keyword = data;
            })

        },


        mounted: function () {
            console.log('nav组件mounted')

        },
        methods: {

            // 获取配置信息
            getStoreData(value = null) {
                // 暂无
            },

            // 获取分类
            getCategories() {
                this.$api.getCategory().then((res) => {
                    // 追加
                    this.pushCategories(res);


                });
            },

            // 追加分类
            pushCategories(categories = []) {
                if (categories.length) {
                    categories.unshift({
                        "id": 0,
                        "sort": 1,
                        "img": null,
                        "state": 1,
                        "c_name": "全部"
                    });
                    this.categories = categories;
                } else {
                    this.categories.unshift({
                        "id": 0,
                        "sort": 1,
                        "img": null,
                        "state": 1,
                        "c_name": "全部"
                    });
                }

                // 自动获取第一个数据
                this.categorySearch(this.categories[0].id);
            },


            // 分类信息查找
            categorySearch(index) {
                this.itemId = index;
                this.keyword = '';
                this.$bus.$emit('keywordChange', this.keyword);

                // 传值给兄弟组件
                this.$bus.$emit('searchVideo', {
                    type: 1, // 1分类  2最新 3关键字 4已购
                    value: index
                });
            },

            // 搜索
            keywordSearch(value) {
                // this.keyword = value;
                console.log('guanjianz', this.keyword)
                this.$bus.$emit('searchVideo', {
                    type: 3, // 1分类  2最新 3关键字 4已购
                    value: value
                });
            },

            // 最新
            newVideos() {
                this.$bus.$emit('searchVideo', {
                    type: 1, // 1分类  2最新 3关键字 4已购
                    value: 22
                });
            },

            // 已经购买的视频
            alreadyBuyVideos() {
                console.log('已购电影查找')
                this.$bus.$emit('searchVideo', {
                    type: 4, // 1分类  2最新 3关键字 4已购
                    value: null
                });
            },

            // 获取页面元素高度
            elementHeight() {
                this.$refs.nav.offsetHeight;
            }
        }
    }
</script>

<style lang="scss" scoped>
    .template-content{

        .grid-row {
            background: red;
            padding: 4rpx;
        }

        .row-row {
            .button-style{
                font-size: 32rpx;
                font-weight: 700;
            }

        }

        .grid-item {
            padding: 4rpx;
            color: #ffffff;
            font-weight: 700;
            font-size: 32rpx;
        }

        .grid-item-hover{
            background: #ffd700!important;
            color: #ff0000!important;
            border-radius: 12rpx;

        }
    }



</style>